<template>
  <div class="Counter">
    <h1>count: {{ count }}</h1>
    <button @click="count++">count++</button>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 100
    }
  },
  beforeCreate() {
    console.log('Counter beforeCreate', '==========')
  },
  created() {
    console.log('Counter created', '==========')
  },
  beforeMount() {
    console.log('Counter beforeMount', '==========')
  },
  mounted() {
    console.log('Counter mounted', '==========')
  },
  beforeUpdate() {
    console.log('Counter beforeUpdate', '==========')
  },
  updated() {
    console.log('Counter updated', '==========')
  },
  beforeDestroy() {
    console.log('Counter beforeDestroy', '==========')
  },
  destroyed() {
    console.log('Counter destroyed', '==========')
  }
};
</script>

<style scoped>

</style>